<template>
  <div class="app-container">
    <main>
      <div class="row-a1">
        <a-form :model="formState" disabled name="basic" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }"
          autocomplete="off">
          <a-row>
            <a-col :span="24">
              <div class="tips">
                基础信息
              </div>
            </a-col>
            <a-col :span="8">
              <a-form-item label="合同版本" name="contractVersion">
                <a-input v-model:value="formState.contractVersion" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="合同号" name="contractNum">
                <a-input v-model:value="formState.contractNum" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="挂靠公司" name="affiliatedCompany">
                <a-input v-model:value="formState.affiliatedCompany" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="授权方" name="authorizer">
                <a-input v-model:value="formState.authorizer" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="承租人" name="lesseeName">
                <a-input v-model:value="formState.lesseeName" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <div class="tips">
                车辆信息
              </div>
            </a-col>
            <a-col :span="8">
              <a-form-item label="车辆品牌" name="vehicleBrand">
                <a-input v-model:value="formState.vehicleBrand" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="车辆型号" name="carModel">
                <a-input v-model:value="formState.carModel" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="车牌号" name="licensePlateNum">
                <a-input v-model:value="formState.licensePlateNum" :disabled="disabledStatus.licensePlateNumStatus" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="车架号" name="carNum">
                <a-input v-model:value="formState.carNum" :disabled="disabledStatus.carNumStatus">
                  <template #addonAfter>
                    <div @click="dataBaseContractNum(formState.carNum)">
                      匹配
                    </div>
                  </template>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="发动机号" name="engineNum">
                <a-input v-model:value="formState.engineNum" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="登记证照片" name="registrationCertificatePhoto">
                <a-upload v-model:file-list="formState.fileList" disabled list-type="picture-card">
                </a-upload>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <div class="tips">
                车辆OCR信息
              </div>
            </a-col>
            <a-col :span="8">
              <a-form-item label="车辆品牌" name="ocrVehicleBrand">
                <a-input v-model:value="formState.ocrVehicleBrand">
                  <template #addonAfter>
                    <div>
                      <a-popover v-if="iconStatus.ocrVehicleBrand">
                        <template #content>
                          <span>与系统中车辆品牌对比一致</span>
                        </template>
                        <div class="icon">
                          <CheckCircleFilled :style="{ color: '#00ff00' }" />
                        </div>
                      </a-popover>
                      <a-popover v-else>
                        <template #content>
                          <span>与系统中车辆品牌对比不一致</span>
                        </template>
                        <div class="icon">
                          <CloseCircleFilled :style="{ color: '#ff0000' }" />
                        </div>
                      </a-popover>
                    </div>
                  </template>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="车辆型号" name="ocrVehicleModels">
                <a-input v-model:value="formState.ocrVehicleModels">
                  <template #addonAfter>
                    <div>
                      <a-popover v-if="iconStatus.ocrVehicleModels">
                        <template #content>
                          <span>与系统中车辆型号对比一致</span>
                        </template>
                        <div class="icon">
                          <CheckCircleFilled :style="{ color: '#00ff00' }" />
                        </div>
                      </a-popover>
                      <a-popover v-else>
                        <template #content>
                          <span>与系统中车辆型号对比不一致</span>
                        </template>
                        <div class="icon">
                          <CloseCircleFilled :style="{ color: '#ff0000' }" />
                        </div>
                      </a-popover>
                    </div>
                  </template>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="车牌号" name="ocrLicensePlateNum">
                <a-input v-model:value="formState.ocrLicensePlateNum">
                  <template #addonAfter>
                    <div>
                      <a-popover v-if="iconStatus.ocrLicensePlateNum">
                        <template #content>
                          <span>与系统中车牌号对比一致</span>
                        </template>
                        <div class="icon">
                          <CheckCircleFilled :style="{ color: '#00ff00' }" />
                        </div>
                      </a-popover>
                      <a-popover v-else>
                        <template #content>
                          <span>与系统中车牌号对比不一致</span>
                        </template>
                        <div class="icon">
                          <CloseCircleFilled :style="{ color: '#ff0000' }" />
                        </div>
                      </a-popover>
                    </div>
                  </template>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="车架号" name="ocrFrameNumber">
                <a-input v-model:value="formState.ocrFrameNumber">
                  <template #addonAfter>
                    <div>
                      <a-popover v-if="iconStatus.ocrFrameNumber">
                        <template #content>
                          <span>与系统中车架号对比一致</span>
                        </template>
                        <div class="icon">
                          <CheckCircleFilled :style="{ color: '#00ff00' }" />
                        </div>
                      </a-popover>
                      <a-popover v-else>
                        <template #content>
                          <span>与系统中车架号对比不一致</span>
                        </template>
                        <div class="icon">
                          <CloseCircleFilled :style="{ color: '#ff0000' }" />
                        </div>
                      </a-popover>
                    </div>
                  </template>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="发动机号" name="ocrEngineNumber">
                <a-input v-model:value="formState.ocrEngineNumber">
                  <template #addonAfter>
                    <div>
                      <a-popover v-if="iconStatus.ocrEngineNumber">
                        <template #content>
                          <span>与系统中发动机号对比一致</span>
                        </template>
                        <div class="icon">
                          <CheckCircleFilled :style="{ color: '#00ff00' }" />
                        </div>
                      </a-popover>
                      <a-popover v-else>
                        <template #content>
                          <span>与系统中发动机号对比不一致</span>
                        </template>
                        <div class="icon">
                          <CloseCircleFilled :style="{ color: '#ff0000' }" />
                        </div>
                      </a-popover>
                    </div>
                  </template>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="证书编号是否一致" name="ocrRegistrationCode">
                <a-input v-model:value="formState.ocrRegistrationCode" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="抵押公司" name="ocrMortgageCompany">
                <a-input v-model:value="formState.ocrMortgageCompany">
                  <template #addonAfter>
                    <div>
                      <a-popover v-if="iconStatus.ocrMortgageCompany">
                        <template #content>
                          <span>与系统中抵押公司对比一致</span>
                        </template>
                        <div class="icon">
                          <CheckCircleFilled :style="{ color: '#00ff00' }" />
                        </div>
                      </a-popover>
                      <a-popover v-else>
                        <template #content>
                          <span>与系统中抵押公司对比不一致</span>
                        </template>
                        <div class="icon">
                          <CloseCircleFilled :style="{ color: '#ff0000' }" />
                        </div>
                      </a-popover>
                    </div>
                  </template>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="抵押公司组织机构代码" name="ocrMortgageCompanyCreditCode">
                <a-input v-model:value="formState.ocrMortgageCompanyCreditCode">
                  <template #addonAfter>
                    <div>
                      <a-popover v-if="iconStatus.ocrMortgageCompanyCreditCode">
                        <template #content>
                          <span>与系统中抵押公司组织机构代码对比一致</span>
                        </template>
                        <div class="icon">
                          <CheckCircleFilled :style="{ color: '#00ff00' }" />
                        </div>
                      </a-popover>
                      <a-popover v-else>
                        <template #content>
                          <span>与系统中抵押公司组织机构代码对比不一致</span>
                        </template>
                        <div class="icon">
                          <CloseCircleFilled :style="{ color: '#ff0000' }" />
                        </div>
                      </a-popover>
                    </div>
                  </template>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="发证机关章" name="ocrRegistrationAuthority">
                <a-select allowClear v-model:value="formState.ocrRegistrationAuthority">
                  <a-select-option :value="'Y'">
                    是
                  </a-select-option>
                  <a-select-option :value="'N'">
                    否
                  </a-select-option>
                  <template #suffixIcon>
                    <div>
                      <a-popover v-if="iconStatus.ocrRegistrationAuthority">
                        <template #content>
                          <span>与系统中发证机关章对比一致</span>
                        </template>
                        <div class="icon">
                          <CheckCircleFilled :style="{ color: '#00ff00' }" />
                        </div>
                      </a-popover>
                      <a-popover v-else>
                        <template #content>
                          <span>与系统中发证机关章对比不一致</span>
                        </template>
                        <div class="icon">
                          <CloseCircleFilled :style="{ color: '#ff0000' }" />
                        </div>
                      </a-popover>
                    </div>
                  </template>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="机动车所有人" name="ocrOwnerInformation">
                <a-input v-model:value="formState.ocrOwnerInformation">
                  <template #addonAfter>
                    <div>
                      <a-popover v-if="iconStatus.ocrOwnerInformation">
                        <template #content>
                          <span>与系统中机动车所有人对比一致</span>
                        </template>
                        <div class="icon">
                          <CheckCircleFilled :style="{ color: '#00ff00' }" />
                        </div>
                      </a-popover>
                      <a-popover v-else>
                        <template #content>
                          <span>与系统中机动车所有人对比不一致</span>
                        </template>
                        <div class="icon">
                          <CloseCircleFilled :style="{ color: '#ff0000' }" />
                        </div>
                      </a-popover>
                    </div>
                  </template>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="使用性质" name="ocrUsingCharacter">
                <a-input v-model:value="formState.ocrUsingCharacter" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <div class="modal-btns">
          <div class="modal-btn">
            <a-button type="primary" @click="handleChange(formState, 'inHome')"
              :disabled="disabledStatus.flawBtn">可入库</a-button>
          </div>
          <div class="modal-btn">
            <a-button danger type="primary" @click="handleChange(formState, 'return')">退回</a-button>
          </div>
          <div class="modal-btn">
            <a-button color="#555" type="primary" @click="handleChange(formState, 'air')">没收</a-button>
          </div>
          <div class="modal-btn">
            <a-button danger @click="router.push('/commerfiles')">取消</a-button>
          </div>
        </div>
      </div>
    </main>
    <a-modal v-model:open="modalOpen.open1" style="width:500px;" title="可入库" :maskClosable="false" :closable="false">
      <div class="modal-body">
        <a-form :model="formState" ref="formRef1" :rules="rules1" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"
          autocomplete="off">
          <el-row>
            <a-col :span="24">
              <a-form-item label="是否为瑕疵件" name="isFlaw">
                <a-select allowClear v-model:value="formState.isFlaw" placeholder="请选择">
                  <a-select-option v-for="(item, index) in typeOptions.options1" :value="item.codeValue"
                    :key="item.codeValue">
                    {{ item.codeName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="24" v-show="formState.isFlaw == MATERIAL.FLAW">
              <a-form-item label="瑕疵内容" name="flawContent">
                <a-select allowClear v-model:value="formState.flawContent" placeholder="请选择">
                  <a-select-option v-for="(item, index) in typeOptions.options4" :value="item.codeValue"
                    :key="item.codeValue">
                    {{ item.codeName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </el-row>
        </a-form>
      </div>
      <template #footer>
        <div class="modal-btns">
          <div class="modal-btn">
            <a-button @click="handleChange({}, 'flaw')" type="primary">确认</a-button>
          </div>
          <div class="modal-btn">
            <a-button @click="cancel('flaw')">关闭</a-button>
          </div>
        </div>
      </template>
    </a-modal>
    <a-modal v-model:open="modalOpen.open2" style="width:500px;" title="退回" :maskClosable="false" :closable="false">
      <div class="modal-body">
        <a-form :model="formState" ref="formRef2" :rules="rules2" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"
          autocomplete="off">
          <el-row>
            <a-col :span="24">
              <a-form-item label="退回原因" name="reiewReason">
                <a-select allowClear v-model:value="formState.reiewReason" placeholder="请选择">
                  <a-select-option v-for="(item, index) in typeOptions.options2" :value="item.codeValue"
                    :key="item.codeValue">
                    {{ item.codeName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </el-row>
        </a-form>
      </div>
      <template #footer>
        <div class="modal-btns">
          <div class="modal-btn">
            <a-button @click="handleChange({}, 'reason')" type="primary">确认</a-button>
          </div>
          <div class="modal-btn">
            <a-button @click="cancel('reason')">关闭</a-button>
          </div>
        </div>
      </template>
    </a-modal>
    <a-modal v-model:open="modalOpen.open3" style="width:500px;" title="没收" :maskClosable="false" :closable="false">
      <div class="modal-body">
        <a-form :model="formState" ref="formRef3" :rules="rules3" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"
          autocomplete="off">
          <el-row>
            <a-col :span="24">
              <a-form-item label="没收原因" name="reiewReason">
                <a-select allowClear v-model:value="formState.reiewReason" placeholder="请选择">
                  <a-select-option v-for="(item, index) in typeOptions.options3" :value="item.codeValue"
                    :key="item.codeValue">
                    {{ item.codeName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </el-row>
        </a-form>
      </div>
      <template #footer>
        <div class="modal-btns">
          <div class="modal-btn">
            <a-button @click="handleChange({}, 'reiew')" type="primary">确认</a-button>
          </div>
          <div class="modal-btn">
            <a-button @click="cancel('reiew')">关闭</a-button>
          </div>
        </div>
      </template>
    </a-modal>
    <a-modal v-model:open="modalOpen.open4" style="width:500px;" title="提示" :maskClosable="false" :closable="false">
      <div class="modal-body">
        <div class="tips">
          匹配到数据,是否使用?
        </div>
      </div>
      <template #footer>
        <div class="modal-btns">
          <div class="modal-btn">
            <a-button @click="handleChange({}, 'use')" type="primary">确认</a-button>
          </div>
          <div class="modal-btn">
            <a-button @click="cancel('use')">关闭</a-button>
          </div>
        </div>
      </template>
    </a-modal>
    <div class="shade" v-show="spin">
      <a-spin size="large" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { reviewFiles } from "@/api/commerFiles";
import { getQueryAll, previewFiles } from "@/api/common";
import { getContractNum } from '@/api/commerExpress'
import { user as useUser } from "@/store";
import { message } from 'ant-design-vue';
import { CheckCircleFilled, CloseCircleFilled } from "@ant-design/icons-vue";
import { MATERIAL } from "@/utils/config";

const user = useUser();
const router = useRouter();

const formRef1 = ref({});
const formRef2 = ref({});
const formRef3 = ref({});
const spin = ref(false);
const defaultContractNum = ref({});
const modalOpen = reactive({
  open1: false,
  open2: false,
  open3: false,
  open4: false
});
interface FormState {
  [props: string]: string | number | Array<object>;
}
let formState: FormState = reactive({
});
const disabledStatus = reactive({
  licensePlateNumStatus: true,
  carNumStatus: true,
  flawBtn: false
})
let iconStatus = reactive({
  ocrVehicleBrand: false,
  ocrVehicleModels: false,
  ocrLicensePlateNum: false,
  ocrFrameNumber: false,
  ocrEngineNumber: false,
  ocrMortgageCompany: false,
  ocrMortgageCompanyCreditCode: false,
  ocrRegistrationAuthority: false,
  ocrOwnerInformation: false
});
const typeOptions = reactive({
  options1: [],
  options2: [],
  options3: [],
  options4: []
});
const rules1 = computed(() => {
  let rules = {
    isFlaw: [{ required: true, message: "请选择", trigger: "blur" }]
  };
  if (formState['isFlaw'] == MATERIAL.FLAW) {
    rules['flawContent'] = [{ required: true, message: "请选择", trigger: "blur" }];
  }
  return rules;
});
const rules2 = computed(() => {
  let rules = {
    reiewReason: [{ required: true, message: "请选择", trigger: "blur" }]
  };
  return rules;
});
const rules3 = computed(() => {
  let rules = {
    reiewReason: [{ required: true, message: "请选择", trigger: "blur" }]
  };
  return rules;
});
function dataBaseContractNum(carNum: string) {
  getContractNum({ carNum }).then((res: any) => {
    if (Object.keys(res).length > 0) {
      modalOpen.open4 = true;
      defaultContractNum.value = res;
    } else {
      message.info("未匹配到数据");
    }
  })
}
function handleChange(row: FormState, type: string) {
  switch (type) {
    case 'inHome':
      modalOpen.open1 = true;
      break;
    case 'return':
      modalOpen.open2 = true;
      break;
    case 'air':
      modalOpen.open3 = true;
      break;
    case 'flaw':
      formRef1.value.validate().then(() => {
        reviewFiles({ ...formState, reviewStatus: MATERIAL.WAREHOUSE }).then((res: any) => {
          if (res) {
            message.success("操作成功");
            setTimeout(() => {
              user.setFiles({}).then((res: any) => {
                if (res) {
                  router.push("/commerfiles");
                }
              });
            }, 2000);
          }
        });
      })
      break;
    case 'reason':
      formRef2.value.validate().then(() => {
        reviewFiles({ ...formState, reviewStatus: MATERIAL.BACK }).then((res: any) => {
          if (res) {
            message.success("操作成功");
            setTimeout(() => {
              user.setFiles({}).then((res: any) => {
                if (res) {
                  router.push("/commerfiles");
                }
              });
            }, 2000);
          }
        });
      })
      break;
    case 'reiew':
      formRef3.value.validate().then(() => {
        reviewFiles({ ...formState, reviewStatus: MATERIAL.CONFISCATE }).then((res: any) => {
          if (res) {
            message.success("操作成功");
            setTimeout(() => {
              user.setFiles({}).then((res: any) => {
                if (res) {
                  router.push("/commerfiles");
                }
              });
            }, 2000);
          }
        });
      })
      break;
    case 'use':
      for (const key in defaultContractNum.value) {
        if (key == 'id') {
          formState.basicDataId = defaultContractNum.value[key];
        } else {
          if (defaultContractNum.value[key]) {
            formState[key] = defaultContractNum.value[key];
          }
        }
      }
      checkFormState();
      cancel('use');
      break;
    default:
      break;
  }
}
function cancel(type: string) {
  switch (type) {
    case "flaw":
      modalOpen.open1 = false;
      formState.isFlaw = null;
      formState.flawContent = null;
      break;
    case "reason":
      modalOpen.open2 = false;
      formState.reiewReason = null;
      break;
    case "reiew":
      modalOpen.open3 = false;
      formState.reiewReason = null;
      break;
    case 'use':
      modalOpen.open4 = false;
      defaultContractNum.value = {};
      break;
    default:
      break;
  }
}
async function getLoad() {
  if (Object.keys(user.$state.filesInfo).length <= 0) {
    router.push('/commerfiles');
    return false;
  }
  spin.value = true;
  formState = Object.assign(formState, user.$state.filesInfo);
  checkFormState();
  if (formState.registrationCertificatePhoto) {
    let ids = formState.registrationCertificatePhoto.split(",");
    let fileList = [] as Array<object>;
    for (const key in ids) {
      await previewFiles({ resourceId: ids[key] }).then((res: any) => {
        if (res) {
          fileList.push({
            uid: res,
            name: res,
            url: res,
            status: 'done',
            preview: res,
            thumbUrl: res,
            response: {
              data: ids[key],
              status: {
                code: 0,
                msg: "Success"
              }
            }
          });
        }
      })
    }
    formState['fileList'] = fileList;
  };
  spin.value = false;
}
function checkFormState() {
  if ((formState['vehicleBrand'] == formState['ocrVehicleBrand']) && formState['vehicleBrand'] != null) {
    iconStatus['ocrVehicleBrand'] = true;
  } else {
    iconStatus['ocrVehicleBrand'] = false;
  };

  if ((formState['carModel'] == formState['ocrVehicleModels']) && formState['carModel'] != null) {
    iconStatus['ocrVehicleModels'] = true;
  } else {
    iconStatus['ocrVehicleModels'] = false;
  };

  if ((formState['licensePlateNum'] == formState['ocrLicensePlateNum']) && formState['licensePlateNum'] != null) {
    iconStatus['ocrLicensePlateNum'] = true;
  } else {
    iconStatus['ocrLicensePlateNum'] = false;
  };

  if ((formState['carNum'] == formState['ocrFrameNumber']) && formState['carNum'] != null) {
    iconStatus['ocrFrameNumber'] = true;
  } else {
    iconStatus['ocrFrameNumber'] = false;
  };

  if ((formState['engineNum'] == formState['ocrEngineNumber']) && formState['engineNum'] != null) {
    iconStatus['ocrEngineNumber'] = true;
  } else {
    iconStatus['ocrEngineNumber'] = false;
  };

  if (formState['ocrMortgageCompany'] == '平安国际融资租赁有限公司') {
    iconStatus['ocrMortgageCompany'] = true;
  } else {
    iconStatus['ocrMortgageCompany'] = false;
  };

  if (formState['ocrMortgageCompanyCreditCode'] == '91310000054572362X') {
    iconStatus['ocrMortgageCompanyCreditCode'] = true;
  } else {
    iconStatus['ocrMortgageCompanyCreditCode'] = false;
  };

  if (formState['ocrRegistrationAuthority'] == 'Y') {
    iconStatus['ocrRegistrationAuthority'] = true;
  } else {
    iconStatus['ocrRegistrationAuthority'] = false;
  };

  if (formState['affiliatedCompany']) {
    if (formState['ocrOwnerInformation'] == formState['affiliatedCompany']) {
      iconStatus['ocrOwnerInformation'] = true;
    } else {
      iconStatus['ocrOwnerInformation'] = false;
    };
  };

  if (formState['businessLine'] == MATERIAL.LIGHTTRUCKLINE && formState['mortgageModel'] == MATERIAL.PAYMENTREGISTRATION) {
    disabledStatus.licensePlateNumStatus = false;
  } else {
    disabledStatus.licensePlateNumStatus = true;
  }

  if (formState['contractVersion'] == null || formState['contractVersion'] == "") {
    disabledStatus.carNumStatus = false;
    disabledStatus['flawBtn'] = true;
  } else {
    disabledStatus.carNumStatus = true;
    disabledStatus['flawBtn'] = false;
  };
}
function getOptionsList() {
  //是否瑕疵
  getQueryAll({ codeType: 'isFlaw' }).then((res: any) => {
    typeOptions.options1 = res;
  });
  //退回原因
  getQueryAll({ codeType: 'reviewReason' }).then((res: any) => {
    typeOptions.options2 = res;
  });
  //没收原因
  getQueryAll({ codeType: 'confisacteType' }).then((res: any) => {
    typeOptions.options3 = res;
  });
  //瑕疵内容
  getQueryAll({ codeType: 'flawContent' }).then((res: any) => {
    typeOptions.options4 = res;
  });
}
getLoad();
getOptionsList();
</script>
<style lang="less" scoped>
.tips {
  font-size: 14px;
  color: #a6a6a6;
  margin-bottom: 20px;
}
</style>